<!-- 通用消息列表组件 -->
<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svgIcon iconName="icon-fanhui" font-size="40px"></svgIcon>
            </div>
            <div class="title">
              {{ title }}
            </div>
        </div>
        <div class="content">
          <div 
            class="item" 
            v-for="(item, index) in messageList" 
            :key="index" 
            @click="handleItemClick(item)"
            :class="{ 'unread': !item.isRead }"
          >
            <div class="pic">
              <img :src="item.img" alt="">
            </div>
            <div class="nr">
              <div class="nr_title">
                {{ item.title }}
                <span v-if="!item.isRead" class="unread-dot"></span>
              </div>
              <div class="nr_text">
                {{ item.content }}
              </div>
            </div>
            <div class="time">
              {{ item.time }}
            </div>
          </div>
        </div>
    </div>
</template>

<script setup>
import svgIcon from '@/components/svgIcon.vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  messageList: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['item-click']);

const handleItemClick = (item) => {
  emit('item-click', item);
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    .top {
      width: 100%;
      height: 100px;
      font-size: 32px;
      position: fixed;
      border-bottom: 1px solid gray;
      background-color: #fff;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      .back {
        width: 100px;
        height: 100%;
        line-height: 100px;
        text-align: center;
      }
      .title {
        width: 250px;
        text-align: center;
        line-height: 100px;
        font-size: 32px;
        margin-left: 150px;
      }
    }
    .content {
      width: 100%;
      margin-top: 100px;
      .item {
        width: 100%;
        height: 150px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #000;
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:hover {
          background-color: #f5f5f5;
        }
        
        &:active {
          background-color: #e0e0e0;
        }
        
        &.unread {
          background-color: #f0f8ff;
          border-left: 4px solid #2780fe;
        }
        
        .pic {
          width: 90px;
          height: 90px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 50%;
          img {
            width: 90px;
          height: 90px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 50%;
          }
        }
        .nr {
          margin-left: 20px;
          width: 430px;
          height: 80px;
          .nr_title {
            font-size: 32px;
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: space-between;
            
            .unread-dot {
              width: 30px;
              height: 30px;
              background-color: #ff4757;
              border-radius: 50%;
              flex-shrink: 0;
              margin-left: auto;
            }
          }
          .nr_text {
            font-size: 28px;
            color: #989898;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .time {
          margin-left: 15px;
          height: 80px;
          font-size: 26px;
          color: #989898;
        }
      }
    }
}
</style> 